<template>
	<div class="right-board">
		<el-tabs class="center-tabs">
			<el-tab-pane label="组件属性" name="field" />
			<!-- <el-tab-pane label="表单属性" name="form" /> -->
		</el-tabs>
		<div v-if="draggableItem && draggableItem.activeData">
			<el-form :model="draggableItem" label-width="auto" style="max-width: 100%">
				<PickerForm v-if="draggableItem?.ispicker" v-model="draggableItem.activeData" />
				<!-- 元素点击 -->
				<div v-if="draggableItem?.barType === 'click'">
					<el-form-item label="左键还是右键">
						<el-radio-group v-model="draggableItem.activeData.leftOrRight">
							<el-radio-button label="left">左键</el-radio-button>
							<el-radio-button label="right">右键</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="单机还是双击">
						<el-radio-group v-model="draggableItem.activeData.clickType">
							<el-radio-button label="click">单机</el-radio-button>
							<el-radio-button label="doubleclick">双击</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</div>
				<!-- 输入文本 -->
				<div v-if="draggableItem?.barType === 'input'">
					<el-form-item label="输入框类型">
						<el-radio-group v-model="draggableItem.activeData.leftOrRight">
							<el-radio-button label="text">文本</el-radio-button>
							<el-radio-button label="password">密码</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="输入内容">
						<el-input :type="draggableItem.activeData.inputType" placeholder="请输入内容"
							v-model.trim="draggableItem.activeData.inputVal"></el-input>
					</el-form-item>
					<el-form-item label="是否回车键">
						<el-radio-group v-model="draggableItem.activeData.isEnter">
							<el-radio-button label="1">是</el-radio-button>
							<el-radio-button label="2">否</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</div>
			</el-form>
		</div>


	</div>



</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { ActiveData, PickerData } from './types';

import PickerForm from '../picker/index.vue';
import { DataList } from '../../utils/constant';

const draggableItem = defineModel<DataList>();


onMounted(() => {
	console.log(draggableItem,"draggableItem");

});

// 拾取器用到的数据
let pickerData: PickerData = reactive({
	pickerImg: '',
	xpath: '',
	pickerType: '',
});
const setPickerData = (data: PickerData) => {
	console.log(data);
	pickerData = data;
};
</script>

<style lang="scss" scoped>
.right-board {
	width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	padding-top: 3px;

	.field-box {
		position: relative;
		height: calc(100vh - 42px);
		box-sizing: border-box;
		overflow: hidden;
	}

	.el-scrollbar {
		height: 100%;
	}
}

.select-item {
	display: flex;
	border: 1px dashed #fff;
	box-sizing: border-box;

	& .close-btn {
		cursor: pointer;
		color: #f56c6c;
	}

	& .el-input+.el-input {
		margin-left: 4px;
	}
}

.el-input {
	width: 350px;
}

.select-item+.select-item {
	margin-top: 4px;
}

.select-item.sortable-chosen {
	border: 1px dashed #409eff;
}

.select-line-icon {
	line-height: 32px;
	font-size: 22px;
	padding: 0 4px;
	color: #777;
}

.option-drag {
	cursor: move;
}

.time-range {
	.el-date-editor {
		width: 227px;
	}

	::v-deep .el-icon-time {
		display: none;
	}
}

.document-link {
	position: absolute;
	display: block;
	width: 26px;
	height: 26px;
	top: 0;
	left: 0;
	cursor: pointer;
	background: #409eff;
	z-index: 1;
	border-radius: 0 0 6px 0;
	text-align: center;
	line-height: 26px;
	color: #fff;
	font-size: 18px;
}

.node-label {
	font-size: 14px;
}

.node-icon {
	color: #bebfc3;
}

::v-deep .el-form-item__label {
	width: 120px !important;
}
</style>
./types
